<template>
	<!-- 团长入驻 -->
	<view class="page">
		<view class="lin-top"></view>
		<view class="form-data">
			<view class="form-item line">
				<view class="item-name">
					<view class="item-icon">*</view>
					<text class="item-title">姓名</text>
				</view>
				<input type="text" placeholder="请输入真实姓名" class="item-input" v-model="formData.name" />
			</view>
			<view class="form-item line">
				<view class="item-name">
					<view class="item-icon">*</view>
					<text class="item-title">手机号</text>
				</view>
				<input type="text" placeholder="请输入手机号" class="item-input" v-model="formData.phone_code" />
			</view>
			<view class="form-item line">
				<view class="item-name">
					<view class="item-icon"></view>
					<text class="item-title">微信号</text>
				</view>
				<input type="text" placeholder="请输入微信号" class="item-input" v-model="formData.wechat_code" />
			</view>
		</view>
		<view class="lin-top"></view>
		<view class="form-data">
			<view class="form-item line">
				<view class="item-name">
					<view class="item-icon">*</view>
					<text class="item-title">自提点所在地</text>
				</view>
				<input type="text" placeholder="请选择所在地" class="item-input address-width" v-model="formData.address" />
				<text class="iconfont iconlocation" @click="map_check()"></text>
			</view>
			<view class="form-item ">
				<view class="item-name">
					<view class="item-icon">*</view>
					<text class="item-title">详细地址</text>
				</view>
				<input type="text" placeholder="请输入详细地址" class="item-input" v-model="formData.address2" />
			</view>
		</view>
		<view class="lin-top"></view>
		<view class="form-data">
			<view class="form-item line">
				<view class="item-name">
					<view class="item-icon">*</view>
					<text class="item-title">自提点名称</text>
				</view>
				<input type="text" placeholder="请输入名称" class="item-input" v-model="formData.store_name" />
			</view>
			<view class="form-item form-img-box">
				<view class="item-name">
					<view class="item-icon">*</view>
					<text class="item-title">自提点照片</text>
				</view>

				<view class="form-img" @click="img_check()" :class="formData.store_img==''?'active':''">
					<image :src="$util.img(formData.store_img)" mode="aspectFill" class="store_img" v-if="formData.store_img!=''"></image>
					<text class="iconfont iconadd1" v-if="formData.store_img==''"></text>
				</view>
			</view>
		</view>
		<view class="sue-btn">
			<button type="default" class="color-base-bg" @click="submit()" v-if="!is_updata">确认入驻</button>
			<button type="default" class="color-base-bg" @click="submit(1)" v-if="is_updata">确认修改</button>
		</view>
		<ns-login ref="login"></ns-login>
		<img-cropping selWidth="300" selHeight="300" @upload="myUpload" ref="imgCropping"></img-cropping>
	</view>
</template>

<script>
	// import Config from '@/common/js/config.js'
	import imgCropping from '@/components/img-cropping/cropping.vue';
	export default {
		components: {
			// Config,
			imgCropping
		},
		data() {
			return {
				token: '',
				formData: {
					name: '',
					wechat_code: '',
					phone_code: '',
					latitude: 0,
					longitude: 0,
					province_id: '', //省
					city_id: '', //市
					district_id: '', //区
					address: '',
					address2: '',
					store_name: '',
					store_img: ''
				},
				back: '/otherpages/community/community_apply',
				is_updata: false
			}
		},
		onLoad(option) {
			if (uni.getStorageSync('token')) {
				this.token = uni.getStorageSync('token')
			}
			// 定位回来
			if (option.addr) {
				console.log(option.addr)
				this.formData.address2 = option.name
				this.formData.latitude = option.latng.split(',')[0]
				this.formData.longitude = option.latng.split(',')[1]
				this.Selectloca(option.latng)
				// 补充数据
				this.formData.name = option.address_name
				this.formData.phone_code = option.mobile
				this.formData.wechat_code = option.wechat
				this.formData.store_img = option.img
				this.formData.store_name = option.store_name
				this.token = option.token
				uni.setStorageSync('token', this.token);
			}
			// 重新修改
			if (option.lat) {
				this.formData.name = option.name
				this.formData.wechat_code = option.wechat
				this.formData.latitude = option.lat
				this.formData.longitude = option.log
				this.formData.phone_code = option.mobile
				this.formData.province_id = option.province_id
				this.formData.city_id = option.city_id
				this.formData.district_id = option.district_id
				this.formData.store_img = option.img
				this.formData.store_name = option.store_name
				this.formData.address = option.address
				this.formData.address2 = option.address2
				this.is_updata = true
			}
			console.log(this.formData)
		},
		methods: {
			submit(e = 0) {
				console.log(this.detail_test())
				if (this.detail_test()) {
					this.$api.sendRequest({
						url: '/api/community/apply',
						data: {
							// site_id: this.$config.siteId,
							token: this.token,
							name: this.formData.name,
							mobile: this.formData.phone_code,
							community: this.formData.store_name,
							community_img: this.formData.store_img,
							wechat: this.formData.wechat_code,
							province_id: this.formData.province_id, //省ID
							city_id: this.formData.city_id, //市ID
							district_id: this.formData.district_id, //区ID
							address: this.formData.address,
							full_address: this.formData.address + this.formData.address2,
							longitude: this.formData.longitude,
							latitude: this.formData.latitude
						},
						success: res => {
							console.log(res)
							if (res.code == 0) {
								uni.showToast({
									title: '申请成功',
									icon: 'none'
								})
								setTimeout(() => {
									if (e == 0) {
										this.$util.redirectTo('/pages/member/index/index')
									} else {
										this.$util.redirectTo('/otherpages/community/community_applying')
									}
								}, 1000)
							}
						}
					});
				}
			},
			map_check() {
				// #ifdef MP || APP-PLUS
				uni.chooseLocation({
					success: res => {
						this.formData.latitude = res.latitude;
						this.formData.longitude = res.longitude;
						this.formData.address = res.name;
						// this.getAddress(res.latitude + ',' + res.longitude);
					},
					fail(res) {
						uni.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											if (tip.confirm) {
												uni.openSetting({
													success: function(data) {
														if (data.authSetting['scope.userLocation'] === true) {
															this.$util.showToast({
																title: '授权成功'
															});
															//授权成功之后，再调用chooseLocation选择地方
															setTimeout(function() {
																uni.chooseLocation({
																	success: data => {
																		this.formData.latitude = res.latitude;
																		this.formData.longitude = res.longitude;
																		this.formData.address = res.name;
																		// this.getAddress(res.latitude + ',' + res.longitude);
																	}
																});
															}, 1000);
														}
													}
												});
											} else {
												this.$util.showToast({
													title: '授权失败'
												});
											}
										}
									});
								}
							}
						});
					}
				});
				// #endif
				// #ifdef H5 
				// let backurl = this.$config.h5Domain + this.back;
				let backurl = this.$config.h5Domain + this.back + '?address_name=' +
					this.formData.name + '&mobile=' + this.formData
					.phone_code + '&wechat=' + this.formData.wechat_code + '&img=' + this.formData.store_img + '&store_name=' + this.formData
					.store_name + '&token=' + this.token;
				window.location.href = 'https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=' + encodeURIComponent(
					backurl) + '&key=' + this.$config.mpKey + '&referer=myapp';
				// #endif
			},
			img_check() {
				// this.$refs.imgCropping.fSelect();
				this.$util.upload(
					1, {
						path: 'headimg'
					},
					res => {
						console.log(res)
						this.formData.store_img = res[0];
					}
				);
			},
			// 查询省市区
			Selectloca(e) {
				this.$api.sendRequest({
					url: '/api/memberaddress/tranAddressInfo',
					data: {
						token: this.token,
						latlng: e
					},
					success: res => {
						console.log(res)
						this.formData.province_id = res.data.province_id
						this.formData.city_id = res.data.city_id
						this.formData.district_id = res.data.district_id
						this.formData.address = res.data.province + '-' + res.data.city + '-' + res.data.district
					}
				});
			},
			detail_test() {
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
				if (this.formData.name == '') {
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none'
					})
					return false
				}
				if (!reg_tel.test(this.formData.phone_code.trim())) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return false
				}
				if (this.formData.address == '') {
					uni.showToast({
						title: '请选择自提点所在地',
						icon: 'none'
					})
					return false
				}
				if (this.formData.address2 == '') {
					uni.showToast({
						title: '请选择自提点名称',
						icon: 'none'
					})
					return false
				}
				if (this.formData.store_img == '') {
					uni.showToast({
						title: '请选择自提点照片',
						icon: 'none'
					})
					return false
				}
				return true
			},
			myUpload(rsp) {
				console.log(rsp)
				// uni.request({
				// 	url: this.$config.baseUrl + '/api/upload/headimgBase64',
				// 	method: 'POST',
				// 	data: {
				// 		app_type: 'h5',
				// 		app_type_name: 'H5',
				// 		images: rsp.base64,
				// 		site_id: this.$config.siteId
				// 	},
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded;application/json'
				// 	},
				// 	dataType: 'json',
				// 	responseType: 'text',
				// 	success: res => {
				// 		if (res.data.code == 0) {
				// 			this.newImg = res.data.data.pic_path;
				// 			this.imgurl = res.data.data.pic_path;
				// 		}
				// 	},
				// 	fail: () => {
				// 		this.$util.showToast({
				// 			title: '头像上传失败'
				// 		});
				// 	}
				// });
			},
		}
	}
</script>

<style lang="scss">
	.page {
		.lin-top {
			width: 100%;
			height: 20rpx;
			background-color: #F8F8F8;
		}

		.form-data {
			padding: 0 20rpx;
			background-color: white;

			.form-item {
				height: 100rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;


				.item-name {
					display: flex;
					align-items: center;
					width: 35%;

					.item-icon {
						height: 100rpx;
						line-height: 100rpx;
						padding-top: 8rpx;
						width: 20rpx;
						color: #FF4544;
						font-size: 28rpx;
						margin-right: 4rpx;
					}

					.item-title {
						font-size: 28rpx;
					}
				}

				.item-input {
					width: 65%;
					color: $color-title;
					font-size: 28rpx;
				}

				.address-width {
					width: 70%;
				}
			}

			.line {
				border-bottom: 2rpx solid #EEEEEE;
			}

			.form-img-box {
				height: 303rpx;
				align-items: flex-start;

				.form-img {
					border: 2rpx solid #CCCCCC;
					color: #CCCCCC;
					height: 120rpx;
					margin-top: 40rpx;
					width: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: $border-radius;

					.store_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: $border-radius;
					}

					text {
						font-weight: bold;
						font-size: 50rpx;
					}
				}

				.active {
					border-radius: 0;

				}
			}
		}

		.sue-btn {
			position: fixed;
			bottom: 30rpx;
			left: 0;
			width: 100%;
			padding-bottom: 10rpx;
			padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

			button {
				color: white;
				height: 94rpx;
				border-radius: 60rpx;
				line-height: 94rpx;
			}
		}
	}
</style>
<style scoped>

</style>
